<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xmlns:app="http://www.appcelerator.org">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <noscript><meta http-equiv="refresh" content="0;upgrade_script.html"/></noscript>
    <title>Welcome to Titanium</title>
 
    <script src="js/appcelerator.js" type="text/javascript"></script>
  	<script src="js/jquery-1.2.6.js" type="text/javascript"></script>
  	<script src="js/index.js" type="text/javascript"></script>

	<link rel="stylesheet" type="text/css" href="css/index.css" />
    <link rel="shortcut icon" href="favicon.ico"/>

	
</head>
<body style="visibility:hidden;"  on="l:app.compiled then visible">

<div style="border: 1px sold #141414">
	<div id="header">
		<img src="images/logo.png" style="position:relative;top:6px;left:5px"/>
		<span style="margin-left:10px;position:relative;top:-5px">Welcome to Titanium</span>
		<img src="images/close.png" class="close"/>
	</div>
</div>

<div id="content">

	<table width="100%">
		<tr>

			<!-- LEFT NAV -->
			<td width="20%" valign="top">

				<!-- TOPICS -->
				<div class="section">Topics</div>
				<div id="topics">
					<div class="topic_item active" 
						on="click then l:nav[val=database] 
							or l:nav[val=database] then add[class=active] else remove[class=active]">
							 &gt; Database Access
					</div>
					<div class="topic_item " 
						on="click then l:nav[val=windows] 
							or l:nav[val=windows] then add[class=active] else remove[class=active]">
							 &gt; Native Windows 
					</div>

					<div class="topic_item" 
						on="click then l:nav[val=notification] 
							or l:nav[val=notification] then add[class=active] else remove[class=active]">
							 &gt; Notifications 
					</div>
					<div class="topic_item" 
						on="click then l:nav[val=tray] 
							or l:nav[val=tray] then add[class=active] else remove[class=active]">
							 &gt; System Tray 
					</div>
					<div class="topic_item" 
						on="click then l:nav[val=sound] 
							or l:nav[val=sound] then add[class=active] else remove[class=active]">
							 &gt; Sounds 
					</div>
					<div class="topic_item" 
						on="click then l:nav[val=menus] 
							or l:nav[val=menus] then add[class=active] else remove[class=active]">
							 &gt; App Menus 
					</div>
					<div class="topic_item" 
						on="click then l:nav[val=files] 
							or l:nav[val=files] then add[class=active] else remove[class=active]">
							 &gt; File Dialog 
					</div>

					<div class="topic_item" 
						on="click then l:nav[val=links] 
							or l:nav[val=links] then add[class=active] else remove[class=active]">
							 &gt; External Links 
					</div>

				</div>
	
			    <!-- LINKS -->
				<div class="section">Links</div>
				<div id="links">
					<div class="topic_item"> 
						&gt; <a target="ti:systembrowser" href="http://community.appcelerator.org">Community</a>
					</div>
					<div class="topic_item">
						&gt; <a target="ti:systembrowser" href="http://www.titaniumapp.com/screencasts">Screencasts</a>
						</div>
					<div class="topic_item"> 
						&gt; <a target="ti:systembrowser" href="http://www.titaniumapp.com/demos">Demos</a>
					</div>
					<div class="topic_item">
						&gt; <a target="ti:systembrowser" href="http://www.titaniumapp.com/documentation">API Doc</a>
					</div>
					<div class="topic_item"> 
						&gt; <a target="ti:systembrowser" href="http://www.titaniumapp.com">Titanium Home</a>
					</div>
					<div class="topic_item"> 
						&gt; <a target="ti:systembrowser" href="http://www.appcelerator.org">Appcelerator Home</a>
					</div>

				</div>
			</td>
			
			<!-- CONTENT -->
			<td valign="top">
				<div id="content_window" style="height:420px;padding-left:20px;padding-bottom:10px">
					<div on="l:nav[val=database] then effect[Appear] else hide">
						Titanium has a full API for adding database capabilities to your applications.  Here's a simple
						example of how to use it.
						<p>
							<table width="100%">
								<tr>
									<td width="70%" valign="top">
										<div class="comment">// open db</div>
										<div class="code">var db = new ti.Database;</div>
										<div class="code">db.open('testdb');</div>
										<div class="comment">// create table</div>
										<div class="code">db.execute("create table if not exists Test (value text)");</div>
										<div class="comment">// insert row</div>
										<div class="code">db.execute("insert into Test values(?)",['test 1']);</div>
										<div class="comment">// select data</div>
										<div class="code">var rs = db.execute("select value from Test");</div>
										<div class="comment">// loop results</div>
										<div class="code">while(rs.isValidRow()) {</div>
										<div class="code" style="padding-left:10px">
											alert('retreieved value = ' + rs.field(0));
										</div>
										<div class="code" style="padding-left:10px">next();</div>
										<div class="code">}</div>
										<div class="comment">// close results</div>
										<div class="code">rs.close();</div>
										<div class="code">db.close();</div>
										<button class="button" id="db_button" style="margin-top:10px">
											Run
										</button>
										<button class="button" id="db_reset" style="margin-top:10px">
											Reset
										</button>
										
									</td>
									<td valign="top">
										<div class="code_results_container">
											<div class="code_results code_results_db">
												Result Window
											</div>
										</div>
									</td>
								</tr>
							</table>
						</p>

						
					</div>
					<div on="l:nav[val=windows] then effect[Appear] else hide" style="display:none">
						Titanium provides an API for dynamically creating native windows.  Here 
						is an example.
						<p>
							
							<div class="comment">// create window object</div>
							<div class="code">var win = ti.Window.createWindow();</div>
							<div class="comment">// set height</div>
							<div class="code">win.setHeight(600);</div>
							<div class="comment">// set width</div>
							<div class="code">win.setWidth(800);</div>
							<div class="comment">// set resizable attribute</div>		
							<div class="code">win.setResizable(true);</div>
							<div class="comment">// set URL</div>				
							<div class="code">win.setURL('http://www.titaniumapp.com');</div>
							<div class="comment">// open window</div>
							<div class="code">win.open();</div>
							<div class="comment">// show window</div>
							<div class="code">win.show();</div>

							<button class="button" id="win_button" style="margin-top:10px">
								Run
							</button>
						</p>
					</div>
					<div on="l:nav[val=notification] then effect[Appear] else hide" style="display:none">
						Titanium provides an API for dynamically creating system notifications.  Here's
						an example.
						<p>
							<div class="comment">// create notification object</div>
							<div class="code">var notification = new ti.Notification;</div>		
							<div class="comment">// set Title</div>
							<div class="code">notification.setTitle('My Title');</div>
							<div class="comment">// set Message</div>
							<div class="code">notification.setMessage('It worked - pretty cool!');</div>
							<div class="comment">// set Icon</div>
							<div class="code">notification.setIcon('app://images/logo.png');</div>
							<div class="comment">// show</div>
							<div class="code">notification.show();</div>

							<button class="button" id="not_button" style="margin-top:10px">
								Run
							</button>
							
						</p>
					</div>
					<div on="l:nav[val=tray] then effect[Appear] else hide" style="display:none">
						Titanium provides an API for dynamically creating a system tray icon.  In this example,
						you can click the tray icon to hide and show the window. In Mac, it will appear in the top 
						right, and in Windows it will appear at the bottom.
						<p>
							<div class="comment">// set image (PR 1 does not support PNG in Win32 so we use .ico)</div>
							<div class="code">
								var trayIcon = (ti.platform == "win32")? "app://images/tray.ico":"app://images/tray.png";
							</div>
							<div class="comment">// create tray menu with click callback</div>
						    <div class="code">var menu = ti.Menu.createTrayMenu(trayIcon,null,function(sysmenu)</div>
						    <div class="code">{</div>
							<div class="comment" style="padding-left:10px">// if visible hide window else show </div>
						    <div class="code" style="padding-left:10px">if (ti.Window.currentWindow.isVisible())
							</div>
						    <div class="code" style="padding-left:10px">{</div>
						    <div class="code" style="padding-left:20px">ti.Window.currentWindow.hide();
						    </div>
							<div class="code" style="padding-left:10px">}</div>
						    <div class="code" style="padding-left:10px">else</div>
							<div class="code" style="padding-left:10px">{</div>
						    <div class="code" style="padding-left:20px">ti.Window.currentWindow.show();</div>
						    <div class="code" style="padding-left:10px">}</div>
						    <div class="code">});</div>

							<button class="button" id="tray_button" style="margin-top:10px">
								Run
							</button>
							
						</p>
						
					</div>
					<div on="l:nav[val=sound] then effect[Appear] else hide" style="display:none">
						Titanium provides an API for dynamically playing a sound.  Here's an example.
						<p>
							
							<div class="comment">// create sound object with url to audio file </div>
							<div class="code">var sound = ti.Media.createSound('app://audio/On.mp3');</div>
							<div class="comment">// play</div>
							<div class="code">sound.play();</div>
							
							<button class="button" id="sound_button" style="margin-top:10px">
								Run
							</button>
						
						</p>
					</div>

					<div on="l:nav[val=links] then effect[Appear] else hide" style="display:none">
						Titanium allows your app to open a full web browser using standard HTML anchors.  Here's
						a simple example:
						<p>
							<div class="comment">// use ti:systembrowser as your target</div>
							<div class="code" style="margin-bottom:10px">&lt;a target="ti:systembrowser" href="http://www.appcelerator.org"&gt;&lt;/a&gt;</div>
							
							<a target="ti:systembrowser" href="http://www.titaniumapp.com">Click Me</a>
						
						</p>
					</div>

					<div on="l:nav[val=menus] then effect[Appear] else hide" style="display:none">
						Titanium provides an API for adding application menus.  Here's an example where we 
						add a menu under "Window".
						<p>
							<div class="comment">// get menu object for "Window" menu item</div>
							<div class="code">var menu = ti.Menu.createAppMenu('Window');</div>
							<div class="comment">// add custom item under "Window"</div>

							<div class="code">menu.addItem('My Menu', function()</div>
							<div class="code">{</div>
							<div class="code" style="padding-right:10px">// do nothing</div>
							<div class="code">});</div>
							
							
							<button class="button" id="menu_button" style="margin-top:10px">
								Run
							</button>
						
						</p>
					</div>

					<div on="l:nav[val=files] then effect[Appear] else hide" style="display:none">
						Titanium provides an API for opening and reading files from the files system.  Here's 
						an example that opens a file dialog.
						<p>
							<div class="comment">// open file dialog and count selected files</div>
							<div class="code">ti.Desktop.openFiles(function(files)</div>
							<div class="code">{</div>
							<div class="code" style="padding-right:10px">alert('files length ' + files.length)</div>
							<div class="code">});</div>
							
							
							<button class="button" id="file_button" style="margin-top:10px">
								Run
							</button>
						
						</p>
					</div>

				</div>				
			</td>
		</tr>
	</table>
</div>


</body>
</html>
